<template>
	<div class="components-container">
		<split-pane :min-percent='20' :default-percent='20' split="vertical">
			<template slot="paneL">
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="">
						<el-input placeholder="输入关键字进行过滤" v-model="filterGroupText">
						</el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getGroupList" circle><i class="el-icon-search" /></el-button>
					</el-form-item>
				</el-form>
				<el-tree class="filter-tree" ref="groupTree" :data="groupList" :props="groupProps" default-expand-all show-checkbox
				 :filter-node-method="filterGroupNode" @check-change="groupSelected" :highlight-current="groupProps.groupHighlight"
				 :check-strictly="groupProps.checkStrictly" node-key="dictGroupKey">
					<span class="custom-tree-node" slot-scope="{ node, data }">
						<span>
							{{ data.dictGroupValue }}
						</span>
					</span>
				</el-tree>
			</template>
			<template slot="paneR">
				<el-form :inline="true" :model="searchFrom" class="demo-form-inline">
					<el-form-item  label="字典项的key">
						<el-input v-model="searchFrom.dictKey" placeholder="字典项的key"></el-input>
					</el-form-item>
					<el-form-item  label="字典项的value">
						<el-input v-model="searchFrom.dictValue" placeholder="字典项的value"></el-input>
					</el-form-item>
					<el-form-item  label="字典项的英文">
						<el-input v-model="searchFrom.dictValueEn" placeholder="字典项的英文"></el-input>
					</el-form-item>
					<el-form-item v-if="moreSearch" label="字典项的排序">
						<el-input v-model="searchFrom.dictValueOrder" placeholder="字典项的排序"></el-input>
					</el-form-item>
					<el-form-item v-if="moreSearch" label="是否启用">
						<el-input v-model="searchFrom.dictEnable" placeholder="是否启用"></el-input>
					</el-form-item>
					<el-form-item v-if="moreSearch" label="所属分组的key">
						<el-input v-model="searchFrom.dictGroupKey" placeholder="所属分组的key"></el-input>
					</el-form-item>
					<el-form-item v-if="moreSearch" label="所属分组的value">
						<el-input v-model="searchFrom.dictGroupValue" placeholder="所属分组的value"></el-input>
					</el-form-item>
					<el-form-item v-if="moreSearch" label="所属分组的英文value">
						<el-input v-model="searchFrom.dictGroupValueEn" placeholder="所属分组的英文value"></el-input>
					</el-form-item>
					<el-form-item v-if="moreSearch" label="分组的排序">
						<el-input v-model="searchFrom.dictGroupOrder" placeholder="分组的排序"></el-input>
					</el-form-item>
					<el-form-item label="更多">
						<el-switch v-model="moreSearch" @change="moreChange">
						</el-switch>
					</el-form-item>
					<el-form-item style="float: right;">
						<el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
						<el-button type="primary" @click="addDict"><i class="el-icon-plus" />新增</el-button>
					</el-form-item>
				</el-form>
				<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
					<el-table-column v-for="item in tableColumn" :key="item.field" align="center" :label="item.title" :width="item.width">
						<template slot-scope="{row}">
							<template v-if="item.type == 'select'">
								<span>{{ translation[item.field][row[item.field]] }}</span>
							</template>
							<template>
								<span>{{ row[item.field] }}</span>
							</template>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200px">
						<template slot-scope="scope">
							<el-button icon="el-icon-edit" type="primary" size="mini" @click="editDict(scope.$index, scope.row)">编辑</el-button>
							<el-button icon="el-icon-delete" size="mini" type="danger" @click="deleteDict(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination @size-change="pageSizeChange" @current-change="currentPageChange" :current-page="page.currentPage"
				 :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
				 background>
				</el-pagination>
				<el-dialog width="40%" title="字典信息" :visible.sync="dictAddFormVisible" center>
					<dictEdit :dictInfo="dictInfo" />
					<span slot="footer" class="dialog-footer">
						<el-button type="danger" icon="el-icon-close" @click="dictAddFormVisible = false">取 消</el-button>
						<el-button icon="el-icon-check" type="primary" @click="save">保 存</el-button>
					</span>
				</el-dialog>
			</template>
		</split-pane>
	</div>
</template>
<script>
	import splitPane from 'vue-splitpane'
	import request from '@/utils/request'
	import dictEdit from '@/views/system/dict/dict-edit.vue'
	export default {
		name: 'dictList',
		components: {
			splitPane,
			dictEdit
		},
		data() {
			return {
				//更多检索条件
				moreSearch: false,
				//弹窗是否可见
				dictAddFormVisible: false,
				//搜索表单
				searchFrom: {
					pageNo: 1,
					pageSize: 10
				},
				//表的下拉数据
				tableList: [],
				//正在编辑的用户信息
				dictInfo: {
					dictKey: "",
					dictValue: "",
					dictValueEn: "",
					dictValueOrder: "",
					dictEnable: "",
					dictGroupKey: "",
					dictGroupValue: "",
					dictGroupValueEn: "",
					dictGroupOrder: "",
				},
				//表头
				tableColumn: [{
						field: 'dictKey',
						title: '字典项的key',
					},
					{
						field: 'dictValue',
						title: '字典项的value',
					},
					{
						field: 'dictValueEn',
						title: '字典项的英文',
					},
					{
						field: 'dictValueOrder',
						title: '字典项的排序',
					},
					{
						field: 'dictEnable',
						title: '是否启用',
					},
					{
						field: 'dictGroupKey',
						title: '所属分组的key',
					},
					{
						field: 'dictGroupValue',
						title: '所属分组的value',
					},
					{
						field: 'dictGroupValueEn',
						title: '所属分组的英文value',
					},
					{
						field: 'dictGroupOrder',
						title: '分组的排序',
					},
				],
				//数据转译
				translation: {
					dictId: {},
				},
				//所有的下拉选项
				options: {
					dictId: [],
				},
				//查询方式列表
				listLoading: false,
				//数据列表
				list: null,
				//分页相关参数
				page: {
					pageSizes: [10, 20, 50, 100],
					pageSize: 10,
					total: 0,
					currentPage: 1
				},
				//分组
				filterGroupText: "",
				//分组编辑页是否显示
				groupEditFormVisible: false,
				//分组信息
				groupInfo: {},
				//分组列表
				groupList: [],
				//分组树配置
				groupProps: {
					children: 'children',
					label: 'label',
					groupHighlight: true,
					checkStrictly: true,
					filterText: ""
				},
			}
		},
		//页面初始化加载
		created() {
			this.getList();
			this.getGroupList();
		},
		watch: {
			//角色搜索
			filterGroupText(val) {
				this.$refs.groupTree.filter(val);
			}
		},
		methods: {
			//查询列表
			getList() {
				this.searchFrom['pageNo'] = this.page.currentPage
				this.searchFrom['pageSize'] = this.page.pageSize
				request({
					url: '/system/dict/queryByPage',
					method: 'post',
					data: this.searchFrom
				}).then(response => {
					this.list = response.data.list
					this.page.total = response.data.total
					this.page.currentPage = response.data.pageNum
				})
			},
			//保存用户信息
			save() {
				var url = '/system/dict/insert';
				if (this.dictInfo.dictId) {
					url = '/system/dict/update';
				}
				request({
					url: url,
					method: 'post',
					data: this.dictInfo
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getList();
					this.dictAddFormVisible = false;
				})
			},
			//添加
			addDict() {
				this.dictInfo = {};
				this.dictAddFormVisible = true;
			},
			//编辑
			editDict(index, row) {
				this.dictInfo = {
					dictKey: "",
					dictValue: "",
					dictValueEn: "",
					dictValueOrder: "",
					dictEnable: "",
					dictGroupKey: "",
					dictGroupValue: "",
					dictGroupValueEn: "",
					dictGroupOrder: "",
				}
				this.dictInfo = row;
				this.dictAddFormVisible = true;
			},
			//删除用户
			deleteDict(index, row) {
				this.$confirm('是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.confirmDelete(row)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//确认删除操作
			confirmDelete(row) {
				var url = '/system/dict/delete';
				request({
					url: url,
					method: 'post',
					data: row
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getList();
					this.dictAddFormVisible = false;
				})
			},
			//分页数量修改
			pageSizeChange(pageSize) {
				this.page.pageSize = pageSize;
				this.getList();
			},
			//页码修改
			currentPageChange(page) {
				this.page.currentPage = page;
				this.getList();
			},
			//更多查询条件
			moreChange() {
				this.searchFrom["dictKey"] = null;
				this.searchFrom["dictValue"] = null;
				this.searchFrom["dictValueEn"] = null;
				this.searchFrom["dictValueOrder"] = null;
				this.searchFrom["dictEnable"] = null;
				this.searchFrom["dictGroupKey"] = null;
				this.searchFrom["dictGroupValue"] = null;
				this.searchFrom["dictGroupValueEn"] = null;
				this.searchFrom["dictGroupOrder"] = null;
			},
			//获取分组
			getGroupList() {
				request({
					url: '/system/dict/queryByGroup',
					method: 'post'
				}).then(response => {
					this.groupList = response.data
				})
			},
			//分组选择
			groupSelected(data, checked) {
				var groupCheckedList = this.$refs.groupTree.getCheckedKeys();
				if (checked) {
					this.groupClear(data, checked);
				}
				if(!checked && groupCheckedList.length > 0){
					return;
				}
				if (checked) {
					this.searchFrom.dictGroupKey = data.dictGroupKey
				}else{
					this.searchFrom.dictGroupKey = ""
				}
				this.getList();
			},
			//清除其他选中的角色
			groupClear(currentNode, checked) {
				var groupCheckedList = this.$refs.groupTree.getCheckedKeys();
				for (var i = 0; i < groupCheckedList.length; i++) {
					if (checked && groupCheckedList[i] != currentNode.dictGroupKey) {
						this.$refs.groupTree.setChecked(groupCheckedList[i], false);
					}
				}
			},
			//筛选
			filterGroupNode(value, data) {
				if (!value) {
					return true;
				}
				return data.dictGroupValue.indexOf(value) !== -1;
			},
		}
	}
</script>
<style>
	.components-container {
		position: relative;
		height: 80vh;
	}

</style>
